<!--
 * @Author: hucc
 * @Date: 2021-10-12 16:10:21
 * @LastEditors: hucc
 * @LastEditTime: 2021-10-12 19:46:33
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- <div v-mydir='msg'>指令绑定dom元素</div> -->
        <input type="text" v-mymodel="message"> {{message}} <br>
        <input type="text" v-mymodel="msg"> {{msg}}
    </div>
    <script>
        //1.指令配置项的全局声明
        let directive1 = {
                //指令内部五个钩子函数 每个钩子函数内部有4个形参
                //el 当前指令绑定的dom对象  binding 当前绑定指令的详细信息
                //vNode Vue编译生成的虚拟dom节点
                //oldNode 上一个虚拟dom节点，只有在update和componentUpdated这两个钩子触发时，该参数才有实参 在其他钩子函数中调用，没有意义
                bind(el, binding, vnode, oldVnode) {
                    console.log('bind', el, binding, vnode, oldVnode);
                },
                inserted(el, binding, vnode, oldVnode) {
                    console.log('inserted', el, binding, vnode, oldVnode);
                },
                update(el, binding, vnode, oldVnode) {
                    console.log('update', el, binding, vnode, oldVnode);
                },
                componentUpdated(el, binding, vnode, oldVnode) {
                    console.log('componentUpdated', el, binding, vnode, oldVnode);
                },
                unbind(el, binding, vnode, oldVnode) {
                    console.log('unbind', el, binding, vnode, oldVnode);
                }
            }
            //2.全局注册指令
        Vue.directive('mydir', directive1)
        let directive2 = {
            bind(el, binding, vnode, oldVnode) {
                console.log('bind', el, binding, vnode, oldVnode);
                //双向数据绑定线路一：将数据模型上的数据绑定到目标元素的value上
                //el指向input 
                el.value = binding.value;
                //双向数据绑定线路二：将视图更新的数据相应到对应的数据模型中
                el.oninput = (event) => {
                    vnode.context.$root[binding.expression] = event.target.value
                }
            },
            inserted(el, binding, vnode, oldVnode) {
                console.log('inserted', el, binding, vnode, oldVnode);
            },
            updated(el, binding, vnode, oldVnode) {
                console.log('updated', el, binding, vnode, oldVnode);
            },
            componentUpdated(el, binding, vnode, oldVnode) {
                console.log('componentUpdated', el, binding, vnode, oldVnode);
            },
            unbind(el, binding, vnode, oldVnode) {
                console.log('unbind', el, binding, vnode, oldVnode);
            }
        }
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello 指令',
                message: '我是双向绑定数据'
            },
            methods: {},
            created() {},
            //局部注册自定义指令
            directives: {
                mymodel: directive2
            }
        })
    </script>
</body>

</html>